<template>
    <div class="order-details">
        <div class="breadcrumb">
            <RouterLink class="plain-link breadcrumb-link" :to="{ name: '/home/task-list' }">
                {{ t('taskList.myOrder') }}
            </RouterLink>
            / {{ t('taskList.detailedPage') }}
        </div>
        <div class="order-content">
            <div class="order-title">{{ t('taskList.orderDetails') }}</div>
            <div v-if="TaskDetails.taskStatus === 'accept'" class="order-status mt20">
                {{ t('taskList.waitForCustomerAccept') }}
            </div>
            <div v-else class="order-status mt20">{{ t('taskList.waitForWorkerAccept') }}</div>
            <div class="order-status-step mt20">
                <div class="order-step-1 mr14">{{ t('taskList.submitOrder') }}</div>
                <div class="mr14" :class="[TaskDetails.taskStatus === 'accept' || TaskDetails.taskStatus === 'finished' ? 'order-step-1' : 'order-step-2']">
                    {{ t('taskList.workerAccept') }}
                </div>
                <div class="mr14" :class="[TaskDetails.taskStatus === 'finished' ? 'order-step-1' : 'order-step-2']">{{ t('taskList.completeOrder') }}</div>
            </div>
            <div class="completion-time mt30">
                <div>{{ TaskDetails.createdTime || '--' }}</div>
                <div>{{ TaskDetails.updatedTime || '--' }}</div>
                <div>{{ TaskDetails.updatedTime1 || '--' }}</div>
            </div>
            <div class="order-information mt30">
                <div class="order-information-img">
                    <ImageView class="thumbnail" :imgSrc="TaskDetails.imgSrc" :empty-holder="true" />
                </div>
                <div class="order-information-name">{{ TaskDetails.serviceName || '--' }}</div>
                <div class="order-information-spec">
                    <span v-for="spec in specSelections" :key="spec.id">
                        {{ spec.selection }}
                    </span>
                </div>
                <div class="order-information-number">x{{ TaskDetails.amount }}</div>
                <div class="order-information-price">￥{{ TaskDetails.salary }}</div>
            </div>
            <div class="server-info">
                <div class="server-info-title">{{ t('taskList.serviceInfo') }}</div>
                <div class="server-info-font">{{ t('taskList.fullName') }}{{ TaskDetails.customerName || '--' }}</div>
                <div class="server-info-font">{{ t('taskList.tel') }}{{ TaskDetails.customerPhone || '--' }}</div>
                <div class="server-info-font">
                    {{ t('taskList.serviceTime') }}{{ TaskDetails.appointmentTime || '--' }}
                </div>
                <div class="server-info-font">{{ t('taskList.address') }}{{ TaskDetails.address || '--' }}</div>
            </div>
            <div class="server-info">
                <div class="server-info-title">{{ t('taskList.workerInfo') }}</div>
                <div class="server-info-font">{{ t('taskList.fullName') }}{{ TaskDetails.employeeName || '--' }}</div>
                <div class="server-info-font">{{ t('taskList.tel') }}{{ employeePhone || '--' }}</div>
            </div>
            <div class="server-info">
                <div class="server-info-title">{{ t('taskList.detailedInfo') }}</div>
                <div class="server-info-font">{{ t('taskList.orderId') }}{{ TaskDetails.orderId || '--' }}</div>
                <div class="server-info-font">{{ t('taskList.createTime') }}{{ TaskDetails.createdTime || '--' }}</div>
                <div class="server-info-font">{{ t('taskList.acceptTime') }}{{ TaskDetails.updatedTime || '--' }}</div>
            </div>
            <div class="operation-box">
                <el-button class="but_cancel" size="small">{{ t('taskList.contactCustomer') }}</el-button>
                <el-button
                    v-logAction="{
                        page: currentRouteData.path,
                        item: 'cancelOrder',
                        descriptions: '用户点击取消订单按钮',
                    }"
                    class="but_cancel"
                    size="small"
                >
                    {{ t('taskList.cancelOrder') }}
                </el-button>
                <el-button
                    v-logAction="{
                        page: currentRouteData.path,
                        item: 'completeOrder',
                        descriptions: '用户点击完成订单按钮',
                    }"
                    size="small"
                    @click="orderSuccess(TaskDetails)"
                >
                    {{ t('taskList.completeOrder') }}
                </el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { getTaskOrderDetails, getTaskworkInfo, getpagedoTask } from '@/api/api.query.util';
import { useRoute, useRouter } from 'vue-router';
import { ref, Ref, computed, reactive } from 'vue';
import { t } from '@/i18n';
import { debounce } from '@/utils/utils';
import { ElMessage } from 'element-plus';
import ImageView from '@/components/ImageView.vue';

const TaskDetails: Ref<{ [k: string]: any }> = ref({});
const employeePhone = ref(0);
const specSelections = computed<any>(() => {
    try {
        return JSON.parse(TaskDetails.value.serviceDetail).selections || []
    } catch (error) {
        return []
    }
})

const router = useRouter();
const route = useRoute();
// 获取当前路由
const currentRouteData = router.currentRoute.value;

getDetails()
function getDetails() {
    getTaskOrderDetails({
        method: 'POST',
        data: {
            id: route.query.id,
        },
    }).then((res) => {
        TaskDetails.value = res.result;
    });
}

getTaskworkInfo({
    method: 'POST',
    data: {
        userId: route.query.employeeId,
    },
}).then((res) => {
    employeePhone.value = res.result?.phoneNo || '';
});

function orderSuccess(item: any) {
    debounce(() => {
        getpagedoTask({
            method: 'POST',
            data: reactive({
                action: 'finished',
                id: item.id,
            }),
        }).then((res) => {
            ElMessage({
                message: t('taskList.completeOrder'),
                type: 'success',
            });
            getDetails();
        });
    }, 500);
}
</script>

<style scoped>
.order-details {
    height: 100%;
    flex-grow: 1;
    padding: 20px 30px;
    background-color: #ffffff;
    border-radius: 4px;
}
.breadcrumb,
.breadcrumb-link {
    color: #666666;
    font-size: 12px;
}
.order-content {
    margin-top: 20px;
    margin-right: 300px;
}
.order-title {
    font-size: 14px;
    color: #666666;
}
.order-status {
    color: #3ab0a2;
    font-size: 20px;
}
.order-status-step {
    height: 20px;
    background-color: #ebebeb;
    border-radius: 10px;
    display: flex;
}
.order-step-1 {
    font-size: 12px;
    width: 266px;
    height: 20px;
    background-color: #3ab0a2;
    border-radius: 10px;
    line-height: 20px;
    text-align: center;
    color: #ffffff;
}
.order-step-2 {
    font-size: 12px;
    height: 20px;
    width: 266px;
    line-height: 20px;
    text-align: center;
    color: #999999;
}
.completion-time {
    color: #333333;
    font-size: 12px;
    display: flex;
}
.completion-time div {
    width: 33%;
    text-align: center;
}

.order-information {
    border-top: solid 1px #ebebeb;
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    width: 100%;
}
.order-information-img img {
    height: 44px;
    width: 44px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color-transparent);
    object-fit: cover;
}
.order-information-name {
    color: #3ab0a2;
    font-size: 14px;
    height: 44px;
    line-height: 44px;
}
.order-information-spec {
    color: #666666;
    font-size: 12px;
    height: 44px;
    line-height: 44px;
}

.order-information-spec span {
    padding: 1px 9px;
    border-radius: 4px;
    font-size: 12px;
    color: #666666;
    margin-right: 5px;
    width: 42px;
    height: 16px;
    letter-spacing: 2px;
    border: solid 1px var(--border-color);
}
.order-information-number {
    color: #666666;
    font-size: 12px;
    height: 44px;
    line-height: 44px;
}
.order-information-price {
    color: #666666;
    font-size: 12px;
    height: 44px;
    line-height: 44px;
}
.server-info {
    border-top: solid 1px #ebebeb;
    padding: 20px 0;
}
.server-info-title {
    font-size: 14px;
    color: #333333;
    font-weight: bold;
    line-height: 28px;
}
.server-info-font {
    font-size: 12px;
    color: #333333;
    line-height: 28px;
}
.mt20 {
    margin-top: 20px;
}
.mt30 {
    margin-top: 30px;
}
.operation-box {
    float: right;
    margin-top: 20px;
}
.but_cancel {
    color: var(--text-secondary);
}
.mr14 {
    margin-right: -14px;
}
</style>
